<extend name="Base/common"/>
<block name="head_css">
<link href="__PUBLIC__/Green/css/usercenter.css" rel='stylesheet' type='text/css' />
</block>
<block name="head_script">
    <script type="text/javascript" src="__PUBLIC__/Green/js/usercenter.js"></script>
</block>
<block name="body">
    <div class="width1000">
       <div class="top_tit">
            <a href="{:U('User/index')}">用户中心</a> &gt;&gt; 我的账号 &gt;&gt; <a href="{:U('User/secure')}">账户安全</a> &gt;&gt; 修改手机号
        </div>
        <div class="clearfix relative">
            <include file="User/nav" />
            <div class="user_center">
                <div class="user_profit">
                    <div class="profile_tit">
                       修改已验证手机
                    </div>
                    <div class="profile_person">
                        <div id="sflex03" class="stepflex ">
                            <dl class="first done">
                                <dt class="s-num">1</dt>
                                <dd class="s-text">验证身份<s></s><b></b></dd>
                                <dd></dd>
                            </dl>
                            <dl class="normal doing">
                                <dt class="s-num">2</dt>
                                <dd class="s-text">修改已验证手机<s></s><b></b></dd>
                            </dl>
                            <dl class="last">
                                <dt class="s-num">&nbsp;</dt>
                                <dd class="s-text">完成<s></s><b></b></dd>
                            </dl>
                        </div>

                        <form class="form-horizontal" id="changePhone" action="__SELF__">
                          <div class="form-group">
                            <label class="col-sm-2 control-label">新的手机号码</label>
                            <div class="col-sm-6">
                                <input type="text" name="mobile" class="form-control" id="mobile" placeholder="新的手机号码" />
                            </div>
                          </div>
                          <div class="form-group">
                            <label for="verfyCode" class="col-sm-2 control-label">手机校验码</label>
                            <div class="col-sm-6">
                                <input type="text" name="verfyCode" class="form-control" id="verfyCode" placeholder="验证码" disabled="disabled" />
                            </div>
                            <div class="col-sm-4">
                                <button type="button" id="getVerfy" class="btn btn-default">获取短信校验码</button>
                            </div>
                          </div>
                          <button type="submit" class="btn btn-default">提交</button>
                        </form>
                    
                    </div>
                    <div class="empty_div">&nbsp;</div>
                </div>
            </div>
        </div>
    </div>
</block>    
<block name="script">
<script type="text/javascript" src="__PUBLIC__/Green/js/insurance.js"></script>
<script type="text/javascript">
    highlight_nav("{:U('User/secure')}");
    highlight_nav("javascript:void(0);");
    
    var wait_time = 60; //60秒内

    function wait_next(){
        if(wait_time<=0){
            $('#getVerfy').each(function(){
                $(this).attr("disabled", false).text('获取验证码');
            });
            wait_time = 60;
        }else{
            wait_time --;
            $('#getVerfy').each(function(){
                $(this).attr("disabled", true).text('还有' + wait_time + '秒');
            });
            setTimeout('wait_next()',1000);
        }
    }
    
    $('#getVerfy').on('click',function(){
        var form = $(this)[0].form,
            url = "{:U('User/getVerifyMsg')}";
            $.post(url,{mobile:$('#mobile').val(),forget:1},function(data){
                if(data.status){
                    $('#verfyCode').attr('disabled',false);
                    wait_next();
                } else {
                    alert(data.info);
                }
            },"json");
    });
    
    $('#changePhone').validate({
                rules:{
                    mobile:{
                        required:true,
                        mobile:true
                    },
                    verfyCode:{
                        required:true
                    }
                },
                messages:{
                    mobile:{
                        required:'请填写联系电话',
                        mobile:'请填写正确的手机号码'
                    },
                    verfyCode:{
                        required:'请输入验证码'
                    }
                },
                submitHandler:function(form){
                    var self = $(form);
                    $.post(self.attr("action"), self.serialize(), function(data){
                        if(data.status){
                            window.location.href = data.url;
                        } else {
                            alert(data.info);
                        }
                    }, "json");
                }    
        });
</script>
</block>
